﻿@model Sheng.WeixinConstruction.Infrastructure.InformationEntity

@{
    ViewBag.MainMenu = "Portal";
    ViewBag.LeftMenu = "Information";

    ViewBag.Title = "分类信息";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style type="text/css">
    .divBaseSettingsTitle {
        margin-top: 25px;
        margin-left: 10px;
        margin-right: 10px;
    }
</style>


<script language="javascript">

    var _informationId = getQueryString("informationId");

    //当前页
    var _currentPage = 1;

    $(document).ready(function () {
        if (_online == false)
            return;

        //$("[keyenter]").keypress(function (e) {
        //    if (e.keyCode == 13) {
        //        loadData();
        //    }
        //});

        loadData();
    });

    function loadData(targetPage) {
        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        var args = new Object();
        args.Page = targetPage || 1;
        args.InformationId = _informationId;

        $.ajax({
            url: "/Api/Information/GetCategoryList",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR) {
                // alert(data);

                layer.close(loadLayerIndex);
                if (data.Success) {
                    var resultObj = data.Data;

                    _currentPage = resultObj.Page;

                    //alert(JSON.stringify(resultObj));
                    var gettpl = document.getElementById('tableTemplate').innerHTML;
                    laytpl(gettpl).render(resultObj.ItemList, function (html) {
                        document.getElementById('divTableBodyContainer').innerHTML = html;
                        fitTable();
                    });

                    laypage({
                        skin: 'yahei',
                        cont: document.getElementById('divPagingContainer'),
                        pages: resultObj.TotalPage, //总页数
                        curr: resultObj.Page, //当前页
                        groups: 7, //连续显示分页数
                        jump: function (obj, first) {
                            if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                loadData(obj.curr);
                            }
                        }
                    });

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function loadDataAndCloseLayer(layerIndex) {
        layer.close(layerIndex);
        loadData();
    }

    function loadDataOnPageAndCloseLayer(layerIndex) {
        layer.close(layerIndex);
        loadData(_currentPage);
    }

    function updateInformationNameAndCloseLayer(layerIndex, name) {
        layer.close(layerIndex);
        $("#spanInformationName").html(name);
    }

    function scrollHeader() {
        // alert(divTableBodyContainer.scrollLeft);
        var ml = 0 - divTableBodyContainer.scrollLeft;
        document.getElementById("tableHeader").style.cssText = "margin-left:" + ml + "px;";
    }

    function fitTable() {
        $("#tableBody").width($("#tableHeader").width());

        $("#tableHeader tr:first").each(function (n, value) {
            $(this).find("td").each(function (n, value) {
                $("#tableBody tr:first td:eq(" + n + ")").width(value.width)
            });
        });
    }

    function create() {
        //alert(0);
        layer.open({
            type: 2,
            area: ['540px', '400px'], //宽高
            closeBtn: false,
            title: "",
            shift: _layerShift,
            content: 'InformationCategoryEdit?informationId=' + _informationId
        });
    }

    function modify(id) {
        layer.open({
            type: 2,
            area: ['540px', '400px'], //宽高
            closeBtn: false,
            title: "",
            shift: _layerShift,
            content: 'InformationCategoryEdit?informationId=' + _informationId + '&id=' + id
        });
    }

    function modifyInformation() {
        layer.open({
            type: 2,
            area: ['540px', '200px'], //宽高
            closeBtn: false,
            title: "",
            shift: _layerShift,
            content: 'InformationEdit?id=' + _informationId
        });
    }

    function removeData() {
        var args = new Object();
        args.IdList = new Array();
        var n = 0;

        $("#tableBody input").each(function (index, element) {
            if ($(element).is(':checked')) {
                args.IdList[n] = $(element).attr("value");
                n++;
            }
        });

        if (args.IdList.length == 0) {
            layerAlert("请选择要删除的分类。");
            return;
        }

        var confirmLayerIndex = layer.confirm("是否确认删除选中的分类及其下所有信息？", {
            btn: ['确认', '取消'], //按钮
            shade: [0.4, '#393D49'],
            title: false,
            closeBtn: false,
            shift: _layerShift
        }, function () {
            layer.close(confirmLayerIndex);

            var loadLayerIndex = layer.load(0, {
                shade: [0.2, '#fff']
            });

            $.ajax({
                url: "/Api/Information/BatchRemoveCategory",
                type: "POST",
                dataType: "json",
                data: JSON.stringify(args),
                success: function (data, status, jqXHR) {
                    layer.close(loadLayerIndex);
                    if (data.Success) {
                        loadData(_currentPage);

                    } else {
                        layerAlert(data.Message);
                    }
                },
                error: function (xmlHttpRequest) {
                    layer.close(loadLayerIndex);
                    alert("Error: " + xmlHttpRequest.status);
                }
            });
        });
    }

    function showItem(id) {
        window.location.href = "/Portal/InformationItem?informationId=" + _informationId + '&categoryId=' + id;
    }


</script>

<script id="tableTemplate" type="text/html">

    <table id="tableBody" border="0" cellspacing="0" cellpadding="0">
        {{# for(var i = 0, len = d.length; i < len; i++){ }}
        <tr>
            <td><input type="checkbox" value="{{ d[i].Id }}" /></td>
            <td><img src="{{d[i].Image}}" style="max-width:100px;" /></td>
            <td height="35"><a href="javascript:void(0)" onclick="showItem('{{ d[i].Id }}')">{{ d[i].Name }}</a></td>
        </tr>
        {{# } }}
    </table>

</script>

<div class="divBaseSettingsTitle">
    <table border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class=" font_black_22"><span id="spanInformationName">@Model.Name</span></td>
            <td width="35">&nbsp;</td>
            <td valign="bottom"><a href="javascript:void(0)" onclick="modifyInformation()">[修改]</a></td>
            <td width="15">&nbsp;</td>
            <td valign="bottom"><a href="/Portal/Information">[返回]</a></td>
        </tr>
    </table>
</div>

<div class="divDotLine" style="margin-top:10px; width:400px;"></div>

<div style=" margin-top:20px;">
    <input name="btnCreate" type="button" class="btn_blue" id="btnCreate" value="添加分类" onclick="create()" />
    @*<input name="btnMoveSortUp" type="button" class="btn_blue" id="btnMoveSortUp" value="上 移" style="margin-left:5px;" />
    <input name="btnMoveSortDown" type="button" class="btn_blue" id="btnMoveSortDown" value="下 移" style="margin-left:5px;" />*@
    <div style="float:right">
        <input name="btnRemove" type="button" class="btn_red" id="btnRemove" value="删 除" style="margin-left:5px;" onclick="removeData()" />
    </div>
</div>

<div style=" margin-top:20px">
    <div style="overflow:hidden; padding-left:20px;" class="tableHeader">

        <table id="tableHeader" border="0" cellspacing="0" cellpadding="0" width="500" height="47">
            <tr>
                <td width="50"></td>
                <td width="150">图片</td>
                <td width="300">名称</td>
            </tr>
        </table>
    </div>

    <div style=" margin-top:10px">
        <!--div必须要设置height，否则滚动条出不来-->
        <div id="divTableBodyContainer" style="overflow:auto; height:100%;; padding-left:20px;" onscroll="scrollHeader()">
            <!--table必须要有一个确切的宽度，否则无法超出div-->


        </div>

    </div>

</div>
<div style="height:1px; margin-top:5px; background-color:#cccccc">

</div>

<div id="divPagingContainer" style=" margin-top:20px; margin-bottom:20px;text-align:right; ">

</div>


